{% comment %}
@param {string} type - 'page' | 'post' | 'keynote'
@param {boolean} short
{% endcomment %}

{% if include.type == 'post' %}
<style type="text/css">
    header.intro-header {
        position: relative;
        background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}');

    background: {

    {
        page . header-bg-css
    }
    }
    ;
    }

    {
    %
    if
    page
    .
    header-mask
    %
    }
    /*header.intro-header .header-mask{*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    position: absolute;*/
    /*    background: rgba(0,0,0, {{ page.header-mask }});*/
    /*}*/
    {
    %
    endif
    %
    }
</style>
{% if page.header-style == 'text' %}
<header class="intro-header style-text">
    {% else %}
    <header class="intro-header">
        {% endif %}
        <div class="header-mask"></div>
        {% if page.header-img-credit %}
        <div class="header-img-credit">
            Image by <a href="//{{page.header-img-credit-href}}">{{page.header-img-credit}}</a>
        </div>
        {% endif %}
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="post-heading">
                        <div class="tags">
                            {% for tag in page.tags %}
                            <a class="tag" href="{{ site.baseurl }}/archive/?tag={{ tag | url_encode }}"
                               title="{{ tag }}">{{ tag }}</a>
                            {% endfor %}
                        </div>
                        <h1>{{ page.title }}</h1>
                        {% comment %} always create a h2 for keeping the margin {% endcomment %}
                        <h2 class="subheading">{{ page.subtitle }}</h2>
                        <span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %} on {{ page.date | date: "%B %-d, %Y" }}</span>

                        <div style="margin-top: 10px">
                            <span>字数统计：{{ page.content | strip_html | strip_newlines | remove: " " | size }} | 阅读时长：{{ page.content | strip_html | strip_newlines | remove: " " | size | divided_by: 350 | plus: 1 }}min</span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </header>
    {% endif %}

    {% if include.type == 'keynote' %}
    <style type="text/css">
        header.intro-header {
            height: 500px;
            overflow: hidden;
        }

        header.intro-header .container {
            visibility: hidden;
        }

        header iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }
    </style>
    <header class="intro-header">
        <iframe src="{{page.iframe}}"></iframe>
        <!-- keep for SEO -->
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="post-heading">
                        <div class="tags">
                            {% for tag in page.tags %}
                            <a class="tag" href="{{ site.baseurl }}/archive/?tag={{ tag | url_encode }}"
                               title="{{ tag }}">{{ tag }}</a>
                            {% endfor %}
                        </div>
                        <h1>{{ page.title }}</h1>
                        {% comment %} always create a h2 for keeping the margin {% endcomment %}
                        <h2 class="subheading">{{ page.subtitle }}</h2>
                        <span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %}
                        on {{ page.date | date: "%B %-d, %Y" }}</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    {% endif %}

    {% if include.type == 'page' %}
    <header class="intro-header"
            style="background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    {% if include.short %}
                    <div class="site-heading" id="tag-heading">
                        {% else %}
                        <div class="site-heading">
                            {% endif %}
                            <h1 style="font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;">{% if
                                page.title %}{{ page.title }}{% else %}{{ site.title
                                }}{% endif %}</h1>
                            <span class="subheading">{{ page.description }}</span>
                        </div>
                    </div>
                </div>
            </div>
    </header>
    {% endif %}
